<h2>英雄列表</h2>

<div>
    <label>名称：<input #heroName /> </label>
    <button (click)="addHero(heroName.value); heroName.value='';">添加</button>
</div>

<ul class="heroes">
    <!-- <li *ngFor="let h of heroes" (click)="onSelect(h)" [ngClass]="{selected: h===selectedHero}"> -->
    <li *ngFor="let h of heroes">
        <a [routerLink]="[ '/detail', h.id ]">
            <span class="badge">{{h.id}}</span>{{h.name | uppercase}}
        </a>
        <button class="delete" title="删除英雄" (click)="deleteHero(h)">X</button>
    </li>
</ul>



<!-- <app-hero-detail [hero]="selectedHero"></app-hero-detail> -->
